<template>
  <div class="JNPF-common-layout">
    <div class="vipApply-before" v-if="applyState == 0">
      <div class="title">暂未完成会员申请</div>
      <div class="btn"><el-button type="primary" @click="vipApply">前往会员申请</el-button></div>
    </div>
    <div class="vipApply" v-if="applyState == 1">
      <el-form ref="vipDataForm" :model="vipDataForm" :rules="regRules" class="vipApply-form" label-position="top">
        <el-steps :active="active" align-center finish-status="success" class="vipApply-steps">
          <el-step title="基本信息" description="请填写公司基本信息" />
          <el-step title="详细信息" description="请填写公司详细信息" />
          <el-step title="提交成功" description="认证信息提交成功" />
        </el-steps>
        <div class="vipApply-div">
          <template v-if="active == 0">
            <el-row :gutter="50">
              <el-col :span="12">
                <el-form-item label="公司名称" prop="vipName">
                  <el-input v-model.trim="vipDataForm.vipName" :maxlength="50" placeholder="输入公司名称" key="vipName" clearable />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="公司简称" prop="shortName">
                  <el-input v-model.trim="vipDataForm.shortName" :maxlength="6" placeholder="输入公司简称" key="shortName" clearable />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="50">
              <el-col :span="12">
                <el-form-item label="公司邮箱" prop="vipEmail">
                  <el-input v-model.trim="vipDataForm.vipEmail" placeholder="输入公司邮箱" clearable key="vipEmail" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="行业类型" prop="industryType">
                  <el-select
                    v-model="vipDataForm.industryType"
                    placeholder="选择公司所属行业类型"
                    clearable
                    :style="{ width: '100%' }" key="industryType"
                  >
                    <el-option
                      v-for="(item, index) in industryTypeOptions"
                      :key="index"
                      :label="item.fullName"
                      :value="item.id"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="50">
              <el-col :span="12">
                <el-form-item label="法人" prop="legalName">
                  <el-input v-model.trim="vipDataForm.legalName" :maxlength="20" key="legalName" placeholder="输入公司法人" clearable />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="法人联系电话" prop="legalPhoneNum">
                  <el-input v-model.trim="vipDataForm.legalPhoneNum" :maxlength="11" key="legalPhoneNum" placeholder="输入法人联系电话" clearable />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="50">
              <el-col :span="12">
                <el-form-item label="对外联系人" prop="contactName">
                  <el-input v-model.trim="vipDataForm.contactName" placeholder="输入公司对外联系人" key="contactName" clearable />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="联系人电话" prop="contactPhoneNum">
                  <el-input v-model.trim="vipDataForm.contactPhoneNum" :maxlength="11" key="contactPhoneNum" placeholder="输入公司对外联系人电话" clearable />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="50">
              <el-col :span="12">
                <el-form-item label="信用代码" prop="creditCode">
                  <el-input v-model.trim="vipDataForm.creditCode" :maxlength="18" key="creditCode" placeholder="输入公司会统一信用代码" clearable />
                </el-form-item>
              </el-col>
            </el-row>
          </template>
          <template v-if="active == 1">
            <el-row :gutter="50">
              <el-col :span="12">
                <el-form-item label="营业执照" prop="businessLicense">
                  <JNPF-UploadImg v-model="vipDataForm.businessLicense" :fileSize="5" sizeUnit="MB" :limit="1" :detailed="vipDataForm.businessLicense.length == 1"></JNPF-UploadImg>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="注册资金(万元)" prop="registeredCapital">
                  <el-input v-model.trim="vipDataForm.registeredCapital" type="text" @input="changeNum($event,'registeredCapital')" :maxlength="10" key="registeredCapital" placeholder="输入公司注册资金" clearable />
                </el-form-item>
                <el-form-item label="详细地址" prop="detailAddress">
                  <el-input v-model.trim="vipDataForm.detailAddress" :maxlength="50" key="detailAddress" placeholder="输入公司详细地址" clearable />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="50">
              <el-col :span="12">
                <el-form-item label="所在城市" prop="addressField">
                  <JNPF-Address v-model="vipDataForm.addressField" placeholder="选择所在城市" clearable :level="2" @change="addressFieldChange"></JNPF-Address>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="公司网址" prop="website">
                  <el-input v-model.trim="vipDataForm.website" placeholder="输入公司网址" key="website" :maxlength="300" clearable>
                    <template slot="prepend">https://</template>
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="50">
              <el-col :span="12">
                <el-form-item label="所属基地" prop="baseManageId">
                  <el-select
                    v-model="vipDataForm.baseManageId"
                    placeholder="请选择"
                    clearable
                    :style="{ width: '100%' }" key="baseManageId"
                  >
                    <el-option
                      v-for="(item, index) in baseManageListOptions"
                      :key="index"
                      :label="item.baseName"
                      :value="item.id"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <!-- <el-col :span="12">
                <el-form-item label="开户银行" prop="title">
                  <el-input v-model.trim="vipDataForm.bank" placeholder="输入开户银行" key="bank" clearable />
                </el-form-item>
              </el-col> -->
            </el-row>
            <!-- <el-row :gutter="50">
              <el-col :span="12">
                <el-form-item label="银行账号" prop="typeid">
                  <el-input v-model.trim="vipDataForm.bankNum" placeholder="输入银行账号" key="bankNum" clearable />
                </el-form-item>
              </el-col>
            </el-row> -->
          </template>
          <template v-if="active == 3">
            <div class="finish">
              <div class="finish_title">认证提交完成</div>
              <div class="finish_tips">审核通过将以站内信的方式通知您！</div>
            </div>
          </template>
        </div>
        <el-form-item class="btns">
          <!-- <el-button v-if="active == 1" type="primary" plain @click="back">返回</el-button> -->
          <el-button v-if="active == 0" type="primary" class="one_btn" @click="next">下一步</el-button>
          <el-button v-if="active == 1" type="primary" plain @click="prev">上一步</el-button>
          <el-button v-if="active == 1" type="primary" @click="submitForm">下一步</el-button>
          <el-button v-if="active == 3" type="primary" class="one_btn" @click="returnHome">回到首页</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="JNPF-preview-main" v-if="applyState == 2">
      <el-row :gutter="15" class=" main" :style="{margin: '0 auto',width: '100%'}">
        <el-form ref="elForm" :model="dataForm" :rules="rules" size="small" label-width="120px" label-position="right">
          <template v-if="!loading">
            <el-col :span="24">
              <el-card class="mb-20" shadow="always" header="基础信息">
                <el-col :span="8">
                  <el-form-item label="会员名称:" prop="vipName">
                    {{dataForm.vipName}}
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="会费状态:" prop="expireTime">
                    <span class="blue">{{ !dataForm.expireTime && dataForm.flowState==1 ? '--' : payTime(dataForm.expireTime) >= 0 ? "已缴费" : "已欠费" + payTime(dataForm.expireTime) + "天" }}</span>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="到期时间:" prop="expireTime">
                    <span class="blue">{{(!!dataForm.expireTime && dataForm.flowState!=1) ? jnpf.dateFormat(dataForm.expireTime) : '--'}}</span>
                    <el-button type="primary" @click="payCost()" v-if="dataForm.flowState==2">立即缴费</el-button>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="会员简称:" prop="shortName">
                    {{dataForm.shortName}}
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="法人:" prop="legalName">
                    {{dataForm.legalName}}
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="法人联系电话:" prop="legalPhoneNum">
                    {{dataForm.legalPhoneNum}}
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="联系人:" prop="contactName">
                    {{dataForm.contactName}}
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="联系人电话:" prop="contactPhoneNum">
                    {{dataForm.contactPhoneNum}}
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="行业类型:" prop="industryType">
                    {{ dataForm.industryType | dynamicText(industryTypeOptions) }}
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="信用代码:" prop="creditCode">
                    {{dataForm.creditCode}}
                  </el-form-item>
                </el-col>
                <el-col :span="8" v-if="dataForm.flowState!=2">
                  <el-form-item label="审核状态:" prop="flowState">
                    <span v-if="dataForm.flowState==1"><span class="JG-common-dot" style="background: #52C1F5;"></span>待审核</span>
                    <span v-else-if="dataForm.flowState==3"><span class="JG-common-dot" style="background: #D9001B;"></span>已驳回</span>
                  </el-form-item>
                </el-col>
                <el-col :span="8" v-if="dataForm.flowState==3">
                  <el-form-item label="驳回原因:" prop="approveContent">
                    {{dataForm.approveContent || ''}}
                  </el-form-item>
                </el-col>
              </el-card>
            </el-col>
            <el-col :span="24">
              <el-card class="mb-20" shadow="always" header="详细信息">
                <el-col :span="8">
                  <el-form-item label="单位网址:" prop="website">
                    {{dataForm.website}}
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="注册资金:" prop="registeredCapital">
                    <span v-if="dataForm.registeredCapital != undefined && dataForm.registeredCapital != null">￥{{dataForm.registeredCapital}}元</span>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="所属基地:" prop="baseManageId">
                    {{ dataForm.baseManageId | dynamicText(baseManageListOptions) }}
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="协会地区:" prop="addressField">
                    <JNPF-Address v-model="dataForm.addressField" placeholder="请选择" clearable :level='2' :disabled="true"></JNPF-Address>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="详细地址:" prop="detailAddress">
                    {{dataForm.detailAddress}}
                  </el-form-item>
                </el-col>
              </el-card>
            </el-col>
            <el-col :span="24">
              <el-card class="mb-20" shadow="always" header="营业执照">
                <el-col :span="24">
                  <el-form-item prop="logo">
                    <JNPF-UploadImg v-model="dataForm.businessLicense" :fileSize="5" sizeUnit="MB" :limit="1" :disabled="true" :detailed="dataForm.businessLicense && dataForm.businessLicense.length == 1"></JNPF-UploadImg>
                  </el-form-item>
                </el-col>
              </el-card>
            </el-col>
            <el-col :span="24" class="update" v-if="dataForm.flowState!=2">
              <el-button v-has="'btn_edit'" type="primary" @click="updateInfo">修改信息</el-button>
            </el-col>
          </template>
        </el-form>
      </el-row>
      <JGOrder :visible.sync="orderVisible" :orderType="'members'" :table-data="tableData" :active="stepsActive" @stepNext="stepNext">
        <template #steps>
          <JGSteps :active="stepsActive" :steps="stepsList" />
        </template>
      </JGOrder>
    </div>
  </div>
</template>
<script>
  import request from '@/utils/request'
  import {
    getDataInterfaceRes
  } from '@/api/systemData/dataInterface'
  import {
    getDictionaryDataSelector
  } from '@/api/systemData/dictionary'
  import {vipOrderRecord} from '@/api/vip/order'

  import { getVipGrade } from '@/api/asso/vip/vipLevel'
  import { baseManageList, registerVipInfo, editVipInfo } from '@/api/asso/vip/vipInfo'
  export default {
    name: 'vipApply',
    components: {},
    props: [],
    data() {
      return {
        visible: false,
        loading: false,
        btnLoading: false,
        selectDialogVisible: false,
        currTableConf: {},
        addTableConf: {},
        tableRows: {},
        dataForm: {
          assoCitationName: '',
          assoCitationArea: [],
          assoCitationAddress: '',
          contactName: '',
          phoneNum: '',
          customerServicePhone: '',
          introduction: '',
          bankAccountName: '',
          bankName: '',
          bankAccount: '',
          logo: [],
        },
        rules: {},
        orderVisible: false,
        stepsActive: 0,
        stepsList: ['确认订单', '确认付款', '完成订购'],
        orderId: '',
        tableData: [],
        applyState: 2, //0申请前 1申请中 2申请后
        active: 0,
        vipDataForm: {
          id: "",
          flowId: "",
          status: 0,
          freeapproveruserid: "",
          flowUrgent: 1,
          vipName: undefined,
          shortName: undefined,
          creditCode: undefined,
          industryType: undefined,
          baseManageId: undefined,
          legalName: undefined,
          legalPhoneNum: undefined,
          contactName: undefined,
          contactPhoneNum: undefined,
          addressField: [],
          detailAddress: undefined,
          registeredCapital: undefined,
          vipEmail: undefined,
          website: undefined,
          businessLicense: [],
          vipLevelId: undefined,
          expireTime: undefined
        },
        regRules: {
          vipName: [{ required: true, message: '输入公司名称', trigger: 'change' }],
          shortName: [{ required: true, message: '输入公司简称', trigger: 'change' }],
          industryType: [{ required: true, message: '选择行业类型', trigger: 'change' }],
          legalName: [{ required: true, message: '输入法人', trigger: 'change' }],
          legalPhoneNum: [
            { required: true, message: '输入法人联系电话', trigger: 'change' },
            {
              pattern: /^1[3456789]\d{9}$|^0\d{2,3}-?\d{7,8}$/,
              message: '输入正确的法人联系电话',
              trigger: 'blur'
            }
          ],
          contactName: [{ required: true, message: '输入公司对外联系人', trigger: 'change' }],
          contactPhoneNum: [{
              required: true,
              message: '输入公司对外联系人电话',
              trigger: 'change'
            },
            {
              pattern: /^1[3456789]\d{9}$|^0\d{2,3}-?\d{7,8}$/,
              message: '输入正确的公司对外联系人电话',
              trigger: 'blur'
            },
          ],
          creditCode: [{ required: true, message: '输入信用代码', trigger: 'change' }],
          addressField: [{ required: true, message: '选择所在城市', trigger: 'blur' }],
          detailAddress: [{ required: true, message: '输入详细地址', trigger: 'change' }],
          vipEmail: [
            {
              pattern: /^[a-z0-9]+([._\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$/,
              message: '输入正确的公司邮箱',
              trigger: 'blur'
            },
          ]
        },
        industryTypeOptions: [],
        baseManageListOptions: []
      }
    },
    computed: {},
    watch: {},
    created() {
      this.getInfo()
      this.getBaseManageList()
      this.industryType()
    },
    mounted() {},
    methods: {
      goBack() {
        this.$emit('refresh')
      },
      init() {
        this.associationareaList = []
        this.logoList = []
      },
      getInfo() {
        request({
          url: `/api/vip/vipInfo/getInfoCurrent`,
          method: 'get'
        }).then((res) => {
          if (res.data) {
            this.dataInfo(res.data)
            this.loading = false
          }else{
            this.applyState = 0
          }
        }).catch()
      },
      dataInfo(dataAll){
        let _dataAll =dataAll
        _dataAll.addressField = JSON.parse(_dataAll.addressField)
        _dataAll.businessLicense = JSON.parse(_dataAll.businessLicense)
        this.dataForm = _dataAll
      },
      stepNext(val) {
        this.stepsActive = val
      },
      payCost() {
        this.stepsActive = 0
        vipOrderRecord().then(res => {
          if (res.code == 200) {
            if (!res.data.alreadyExistMark) {
              this.orderId = res.data.id
              this.tableData = [res.data]
              console.log(this.tableData)
              this.orderVisible = true
            } else {
              this.$confirm('您有一个未完成订单，暂时不能进行付费服务，请先付款或取消订单', '一笔订单待支付？', {
                confirmButtonText: '查看未完成订单',
                showCancelButton: false,
                type: 'warning'
              }).then(() => {
                this.$router.push('/vip/order/vipOrderRecord')
              }).catch(() => {
              });
            }
          }
        })
      },
      updateInfo(){
        this.applyState = 1
        this.vipDataForm = JSON.parse(JSON.stringify(this.dataForm));
      },
      // 行业类别
      industryType(){
        getVipGrade('366943117804306949').then(res => {
          if(res.code == 200){
            this.industryTypeOptions = res.data.list
          }
        })
      },
      // 基地列表
      getBaseManageList(){
        baseManageList().then(res => {
          if(res.code == 200){
            this.baseManageListOptions = res.data.list
          }
        })
      },
      prev() {
        this.$refs["vipDataForm"].clearValidate('addressField')
        this.active--
      },
      addressFieldChange(e){
        this.$refs['vipDataForm'].validateField('addressField')
      },
      next() {
        let vaildFlag = true
        this.$refs["vipDataForm"].validateField(['vipName','shortName','industryType','legalName','legalPhoneNum','contactName','contactPhoneNum','creditCode'],valid =>{
          if (!!valid) {
            vaildFlag = false
          }
        })
        if(this.vipDataForm.vipEmail){
         this.$refs["vipDataForm"].validateField(['vipEmail'],valid =>{
           if (!!valid) {
             vaildFlag = false
           }
         })
        }
        if(vaildFlag){
          if(this.vipDataForm.creditCode.length != 18){
            this.$message({
              message: '输入正确的信用代码',
              type: 'error'
            })
            vaildFlag = false
          }
        }
        if(vaildFlag){
          if (this.active++ > 2) {
            this.active = 0
          }
        }
      },
      vipDataList() {
        var _data = JSON.parse(JSON.stringify(this.vipDataForm));
        _data.addressField = JSON.stringify(_data.addressField);
        _data.businessLicense = JSON.stringify(_data.businessLicense);
        return _data;
      },
      submitForm() {
        if(this.vipDataForm.registeredCapital == 0){
          this.$message({
            message: '注册资金不能为0',
            type: 'error',
            duration: 1000
          })
          return
        }
        let submitFlag = true
        this.$refs["vipDataForm"].validateField(['addressField','detailAddress'],valid =>{
          if (!!valid) {
            submitFlag = false
          }
        })
        if(submitFlag){
          var _data = this.vipDataList();
          if (!_data.id) {
            registerVipInfo(_data).then(res => {
              if (res.code === 200) {
                this.$message({
                  message: res.msg,
                  type: 'success'
                })
                this.active = 3
                this.$refs["vipDataForm"].resetFields()
              } else {
                this.$message({
                  message: res.msg,
                  type: 'error'
                })
              }
            }).catch(res => {})
          }else{
            editVipInfo(_data, _data.id).then(res => {
              if (res.code === 200) {
                this.$message({
                  message: res.msg,
                  type: 'success'
                })
                this.active = 3
                this.$refs["vipDataForm"].resetFields()
              } else {
                this.$message({
                  message: res.msg,
                  type: 'error'
                })
              }
            })
          }
        }
      },
      vipApply(){
        this.applyState = 1
      },
      returnHome(){
        this.$store.dispatch('tagsView/delView', this.$route)
        this.$router.push('/')
      },
      changeNum(e, col){
        if(col == 'registeredCapital'){
          this.vipDataForm.registeredCapital = this.vipDataForm.registeredCapital
            .replace(/[^\d^\.]+/g, '')
            .replace(/^0+(\d)/, '$1')
            .replace(/^\./, '0.')
            .match(/^\d*(\.?\d{0,2})/g)[0] || ''
        }
      },
      payTime(time) {
        let beginDate = new Date();
        let endDate = new Date(time);
        let day = (endDate - beginDate) / (1000 * 60 * 60 * 24);
        var x = day
        var y = String(x).indexOf(".") + 1;//获取小数点的位置
        if(y > 0) { // 有小数进一位
          if(day > 0){
            day = day + 1
          } else {
            day = day + (-1)
          }
        }
        return parseInt(day)
      }
    },
  }
</script>
<style lang="scss" scoped>
.vipApply-before{
  width: 100%;
  height: 100%;
  background: #FFFFFF;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  .title{
    font-size: 32px;
    color: rgba(0,0,0,0.90);
  }
  .btn{
    margin: 80px 0 12px 0;
    .el-button--small {
      padding: 10px 100px;
      font-size: 18px;
    }
  }
}
.vipApply{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
  height: 100%;
  background: #FFFFFF;
  .vipApply-form{
    width: 80%;
    height: 100%;
  }
  .vipApply-steps{
    height: 15%;
    margin-top: 5%;
  }
  .vipApply-div{
    height: 60%;
  }
  .finish{
    margin: 0 auto;
    text-align: center;
    padding-top: 20%;
    .finish_title{
      font-size: 32px;
      color: rgba(0,0,0,0.90);
    }
    .finish_tips{
      font-size: 20px;
      color: #999999;
      margin-top: 30px;
    }
  }
  ::v-deep .el-step__title.is-success{
    color: rgba(0,0,0,0.90);
    font-weight: 700;
  }
  ::v-deep .el-step__head.is-success {
      color: #1890ff;
      border-color: #1890ff;
  }
  ::v-deep .el-step__title.is-process{
    color: #1890ff;
  }
  ::v-deep .el-step__head.is-process {
      color: #fff;
      border-color: #1890ff;
      .el-step__icon.is-text{
        background: #1890ff;
      }
  }
  ::v-deep .el-step__description.is-success,::v-deep .el-step__description.is-process{
    color: #999999;
  }
  .btns{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 100%;
    ::v-deep .el-button--primary{
      width: 170px;
      font-size: 16px;
      border-radius: 0.25rem;
    }
    ::v-deep .one_btn.el-button--primary{
      width: 300px;
    }
    ::v-deep .el-button--primary {
        margin-left: 20px;
        margin-right: 20px;
    }
  }
}
.blue{
  color: #1890ff;
  margin-right: 10px;
}
.update{
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
</style>
